<template>
  <div class="all" @click="clickFire">
    <span class="item-border">
      <el-image class="item" style="width: 24px; height: 24px" fit="cover" :lazy="isLazy" :src="itemProperty.url"
        :title="itemProperty.name" :placeholder="itemProperty.name">
      </el-image>
    </span>
    <div class="wrap-item">
      <!-- 旋转 -->
    </div>
    <div class="flex-row border-bottom" style="padding: 0px 20px; height: 60px">
      <el-menu class="flex-1 none-border" :router="true" mode="horizontal" v-show="isShow">
        <el-menu-item v-for="(item, index) in itemProperty.menus" :key="index + 'menus'" :index="'/'+item.moduleName">
          <i class="el-icon-menu"></i>
          <span :title="item.moduleTitle">{{ item.moduleTitle }}</span>
        </el-menu-item>
      </el-menu>
    </div>
    <slot></slot>
  </div>
</template>
<script>
  export default {
    name: "DropDownMenu",
    components: {},
    props: {
      itemProperty: {
        type: Object,
        default: function () {
          return {
            name: 'item',
            url: require('@/assets/Warning.png'),
            menus: [
              {
                moduleName: '',
                moduleTitle: '首页',
              },
              {
                moduleName: 'child-app01',
                moduleTitle: '子工程01',
              },
              {
                moduleName: 'child-app02',
                moduleTitle: '子工程02',
              },
            ],
          }
        }
      },
    },
    data() {
      return {
        isLazy: true,
        isShow: false,
        item: {
        },
      }
    },
    mounted() {
      this.$data.item = this.$props.itemProperty
      console.log(this.$data.item)
    },
    methods: {
      //父级图标点击事件
      clickFire() {
        //参数1：自定义组件事件，在父组件中被调用才能触发父子组件的值传递；参数2：向父组件传递的数据[可为数组形式]
        this.isShow = !this.isShow;
        console.log('clickFire=', this.isShow)
        //this.$emit('clickItem', this.$data.item)
      },
      //下拉菜单点击事件
      handleCommand(command) {
        console.log('handleCommand=', command)
        this.$emit('handleCommand', command)
      },
    },
  }
</script>
<style lang="scss" scoped>
  .all {
    // border: 1px solid skyblue;
    display: inline-block;
    position: relative;
    width: 65px;
    height: 65px;
    // overflow: hidden;
  }

  // 最内层
  .item-border {
    display: inline-block;
    margin: 0 auto;
    margin-left: 0px;
    margin-top: 10px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 3px solid skyblue;

    // background-color: slateblue;
    .item {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }

  // 最外层
  .wrap-item {
    position: absolute;
    top: 0;
    left: 0;
    display: inline-block;
    width: 56px;
    height: 56px;
    border: 5px dotted transparent;
    border-left: 5px dotted #73ffff;
    border-left-width: 3px;
    border-right-color: #73ffff;
    border-top-color: transparent;
    border-radius: 50%;
    // background-color: burlywood;
    animation: circle 3s infinite linear;
  }

  @keyframes circle {
    0% {
      transform: rotate(0deg);
    }

    100% {
      transform: rotate(-360deg);
    }
  }

  //下拉菜单
  .dropMenu {
    margin-top: 5px;
    // background-color: yellowgreen;
    color: #fff;

    //标题项
    .el-dropdown-link {
      cursor: pointer;
    }

    //菜单子项
    .el-dropdown-menu__item {
      color: red !important;
    }

    .dropMenu-item {
      background-color: rosybrown;
    }
  }
</style>